<% include header_index.html %>
<style>
    .header{
        width: 100vw;
        background: white;
        /*background: red;*/
    }
    .back{
        width:20px;
        height:20px;
        margin-left: 20px;
        background: url("images/default_wap/back.png");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        border-top: 12px solid rgba(0,0,0,0);
        float: left;
    }
    .header .input_div{
        height: 28px;
        overflow: hidden;
        border: 1px solid #adadad;
        border-radius: 6px;
        float: left;
        width: 246px;
        margin-left: 20px;
        margin-top: 7px;
        line-height: 30px;
    }
    .header .input_txt{
        height: 28px;
        float: left;
        width: 206px;
        border: none !important;
        line-height: 28px;
        margin-left: 10px;
    }

    .search_png{
        background: url("images/default_wap/search_wap.png");
        width: 20px;
        height:20px;
        background-size: 20px 20px;
        margin-left: 10px;
        margin-top: 5px;
        float: left;
    }
    input[type=text]:focus{
        outline: none;
    /*border: 1px solid #58b195; // 如何改成别的颜色？*/
    }
    .search_button{
        text-align: center;
        margin-left: 20px;
        line-height: 44px;
        font-size: 13px;
        color: #181818;
    }
    .weui-navbar__item.weui-bar__item--on{
        font-size: 13px;
        color: #ff8000;
        background: none;
    }
    .weui-navbar__item.weui-bar__item--on img{
        display: block;
    }
    .weui-navbar__item{
        font-size: 13px;
        background: none;
        padding: 0 !important;
        height: 44px;
        line-height: 44px;
        color: #181818;
    }
    .weui-navbar__item img{
        width: 157px;
        margin: 0 auto;
        display: block;
        display: none;
    }
    .weui-navbar{
        background: none;
    }
    .weui-navbar__item:after{
        border: none;
    }
    .weui-navbar:after{
        border: none;
    }
    .history_title{
        font-size: 13px;
        color: #adadad;
        text-indent: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100vw;
    }
    .history_div{
        width: 100vw;
        margin-left: 20px;
        background: red;
    }
    .history_value{
        width: 102px;
        height:30px;
        text-align: center;
        line-height: 30px;
        font-size:13px;
        color: #adadad;
        background: rgb(233,234,238);
        display: block;
        float: left;
        margin-right: 15px;
        margin-bottom:20px;
        border-radius: 6px;
    }
    #tab1{
        width: 100vw;
        overflow: hidden;
    }
    .clear_history_shop,.clear_history_product
    {

        position: fixed;
        bottom: 20px;
        width: 100vw;
        left:0;
        font-size: 15px;
        color: #adadad;
        display: block;
        line-height:20px; ;
    }
    .clear_history_shop img,.clear_history_product img{
        width: 15px;
        height:15px;
        float: left;
        margin-right: 10px;
        margin-left: 131px;

    }
</style>

<div class="big_div">


    <div class="header h44">
        <div class="back"></div>
        <div type="text" class="input_div">
            <div class="search_png" alt=""></div>
            <input type="text" class="input_txt" placeholder="请输入关键词">
        </div>
        <a class="search_button">搜索</a>
    </div>
    <!--头部-->
    <div class="bottom">
        <!-- 容器 -->
        <div class="weui-tab">
            <div class="weui-navbar">
                <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
                    <p>查找商品</p>
                    <img class="product_search" src="images/default_wap/selected.png" alt="">
                </a>
                <a class="weui-navbar__item" href="#tab2">
                    <p>查找商店</p>
                    <img class="shop_search" src="images/default_wap/selected.png" alt="">
                </a>
            </div>
            <div class="weui-tab__bd">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">


                    <!--页面一-->
                    <p class="history_title">搜索历史:</p>
                    <div class="history_div">
                        <a class="history_value" v-for="product in products">{{product}}</a>
                    </div>

                    <div class="clear_history_product">
                        <img src="images/default_wap/clear.png" alt="">
                        <p>清空历史记录</p>
                    </div>


                </div>
                <div id="tab2" class="weui-tab__bd-item">


                    <!--页面二-->
                    <p class="history_title">搜索历史:</p>
                    <div class="history_div">
                        <a class="history_value" v-for="shop in shops">{{shop}}</a>
                    </div>
                    <div class="clear_history_shop">
                        <img src="images/default_wap/clear.png" alt="">
                        <p>清空历史记录</p>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!--下面分页-->
</div>
<script type="text/javascript">
/*    //添加key-value 数据到 sessionStorage
    localStorage.setItem("demokey", "http://blog.itjeek.com");
    //通过key来获取value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    localStorage.clear();
    alert(localStorage.length);*/
var page = new Vue({
    el: '.big_div',
    data: {
        products:[],
        shops:[]
    }
});
    $(".clear_history_product").click(function () {
        localStorage.setItem("product_search", '');
        $.toast("删除成功", "successful");
    });
    $(".clear_history_shop").click(function () {
        localStorage.setItem("shop_search", '');
        $.toast("删除成功", "successful");
    });

$(".search_button").click(function () {

        if($(".shop_search").is(":hidden"))
        {
            var product = localStorage.getItem("product_search");
            if(product==null)
            {
                product="";
            }

            product=product+$(".input_txt").val()+'||';

            localStorage.setItem("product_search", product);
        }
        else
        {
            var shop = localStorage.getItem("shop_search");
            if(shop==null){
                shop="";
            }
            shop=shop+$(".input_txt").val()+'||';

            localStorage.setItem("shop_search", shop);
        }
    })
    $(".back").click(function () {
        window.history.back();  //返回上一页
    });
    $(function () {
        var shop = localStorage.getItem("shop_search");
        if(shop!=null)
        {

            var shop=shop.split("||");
            shop.pop();


            shop.forEach(function (item,index) {
                if(item!="")
                {
                    page.shops.push(item);
                }
            })
        }


        var product = localStorage.getItem("product_search");
        if(product!=null)
        {
            var product=product.split("||");
            product.pop();
            product.forEach(function (item,index) {
                if(item!="")
                {
                    page.products.push(item);
                }
            })
        }
    });
</script>
<% include footer.html %>